import styled from "@emotion/styled";
import { Tag, Typography } from "antd";
import { MouseEventHandler } from "react";
import { fontColor } from "./style";

export const Row = styled.div<{
  gap?: number | boolean;
  between?: boolean;
  marginBottom?: number;
}>`
  display: flex;
  align-items: center;
  justify-content: ${(props) => (props.between ? "space-between" : undefined)};
  margin-bottom: ${(props) => props.marginBottom + "rem"};
  > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: ${(props) =>
      typeof props.gap === "number"
        ? props.gap + "rem"
        : props.gap
        ? "2rem"
        : undefined};
  }
`;

export const BoxTitle = styled(Typography.Text)<{ size?: number }>`
  font-size: ${(props) => (props.size ? props.size + "rem" : "1rem")};
  padding: 0 1rem;
  color: ${fontColor};
`;

export const Icon = (props: {
  name: string;
  marginRight?: string;
  fontSize?: string;
  onClick?: MouseEventHandler;
}) => (
  <i
    className={"iconfont " + props.name}
    style={{
      margin: 0,
      marginRight: props.marginRight ? props.marginRight : "1rem",
      fontSize: props?.fontSize,
    }}
    onClick={props.onClick}
  ></i>
);

export const CustomTag = styled(Tag)`
  background-color: #cfdadd;
  border-radius: 1rem;
  color: #fff;
  text-shadow: 0 1px 0 rgb(0 0 0 / 20%);
  text-align: center;
  line-height: 2rem;
  cursor: pointer;
`;
